<!--
 * @Author: your name
 * @Date: 2021-10-28 09:55:11
 * @LastEditTime: 2023-04-12
 * @LastEditors: xw908163987
 * @Description: In User Settings Edit
 * @FilePath: /macc.admin.vue/src/components/rj-groupselectmodal/index.vue
-->
<template>
  <rj-modal
    :title="$t('components.rjGroupselectmodal.title')"
    :visible="visible"
    :maskClosable="false"
    :width="450"
    :bodyStyle="{ height: '530px' }"
    @ok="handelModalOk"
    @cancel="handelModalCancel"
  >
    <div>
      <div class="global-select-group">
        <RjGroup
          @getCurrentGroupInfo="getCurrentGroupInfo"
          style="width: 100%"
          :showGroupType="showGroupType"
          :groupId="groupId"
        ></RjGroup>
      </div>
    </div>
  </rj-modal>
</template>

<script>
import { RjModal, RjGroup } from '@components';
import { mapState } from 'vuex';
export default {
  name: 'GroupSelectModal',
  props: {
    visible: Boolean,
    showGroupType: {
      type: [Array, String],
      default: () => {
        return 'ALL';
      },
    },
    groupId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      selectGroupInfo: {},
    };
  },
  components: {
    'rj-modal': RjModal,
    RjGroup,
  },
  computed: {
    ...mapState('Group', ['groupMap', 'grouproot', 'groupInfo']),
  },
  watch: {
    visible(nv) {
      if (nv) {
        this.selectGroupInfo =
          this.groupId == 0
            ? this.groupMap[this.grouproot?.groupId] || {}
            : this.groupMap[this.groupId];
      }
    },
  },
  methods: {
    getCurrentGroupInfo(groupInfo) {
      this.selectGroupInfo = { ...groupInfo };
    },
    handelModalOk() {
      console.log('============选择了分组', this.selectGroupInfo);
      const currentGroupId = this.groupInfo?.groupId ?? 0;
      this.$emit(
        'selectGroup',
        this.selectGroupInfo,
        this.selectGroupInfo.groupId == currentGroupId
      );
    },
    handelModalCancel() {
      this.closeModal();
    },
    closeModal() {
      this.$emit('modalChange', false);
    },
  },
};
</script>
<style lang="less" scoped>
.global-select-group {
  .pop-search {
    border: none;
  }
}
</style>
